<!--从业者-人才库 -->
<template>
	<view class="recruitment-container">
		<!-- 筛选条件 -->
		<!-- 专业等级筛选 -->
		<view class="filter-section">
			<u-dropdown>
				<u-dropdown-item v-model="value1" title="城市" :options="options1" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="求职岗位" :options="options2" @change="change"></u-dropdown-item>
				<u-dropdown-item v-model="value2" title="薪资范围" :options="options3" @change="change"></u-dropdown-item>
				<!-- <u-dropdown-item v-model="value2" title="工作年限" :options="options4" @change="change"></u-dropdown-item> -->
			</u-dropdown>
		</view>

		<!-- 求职岗位筛选 -->
		<!-- 		<view class="job-filter">
			<u-tag v-for="(job, index) in jobTypes" :key="index" :text="job"
				:mode="activeJob === index ? 'dark' : 'plain'" type="primary" @click="changeJob(index)" size="medium"
				class="job-tag" />
		</view> -->

		<!-- 购买套餐 -->
		<view class="Package-container">
			<!-- 负责人手机号 -->
			<u-cell-item :title="'我的人才库套餐（可查看： ' + tc_num+'份）'"  value="买套餐" :value-style="valueStyle" hover-class="cell-hover-class"
				@click="payPackage"></u-cell-item>
		</view>

		<!-- 人才列表 -->
		<scroll-view scroll-y class="candidate-list" @scrolltolower="loadMore">
			<view v-for="(item, index) in personList" :key="item.user_code" class="candidate-item" @click="viewDetail(item.user_code)">
				<view class="candidate-header">
					<!-- <image :src="item.cyinfo.base.header_img_uri[0].url" class="avatar" mode="aspectFill" /> -->
					<view class="info">
						<view class="name">{{ item.jlbi_name }}</view>
											<view class="meta">
							{{ item.cyinfo.base.jlbi_birth }} | {{ item.cyinfo.base.jlbi_xueli }} | {{ item.cyinfo.zyzs[0].jlzs_name }} | {{ item.cyinfo.zyzs[0].jlzs_name }} {{ item.cyinfo.zyzs[0].jlzs_level }} 
						
						</view>
					</view>
		<!-- 			{{ item.jlbi_birth }} | {{ item.cyinfo.qx.jlqz_xzyq }} {{ item.cyinfo.zyzs[0].jlzs_name }} -->
					<!-- <u-rate :value="candidate.rating" disabled active-color="#ff9900" size="28" /> -->
					<view class="">
						<u-icon name="lock-open" color="#158997"></u-icon>
						<text class="label">已解锁</text>
					</view>

				</view>

				<view class="candidate-content">
					<view class="intention">
						<text class="label" >求职意向：</text>
						<text>{{ item.cyinfo.qz.jlqz_qwzw[0] }}、{{ item.cyinfo.qz.jlqz_qwzw[1] }}</text>
					</view>
					<view class="cases">
						<text class="label">工作经历：</text>
						<text>{{ item.cyinfo.gzjl[0].jlgz_gongsiname }} {{item.cyinfo.gzjl[0].jlgz_indate}}</text>
					</view>
					<view class="experience">
						<text class="label">行业荣誉：</text>
						<text>{{ item.cyinfo.hyry[0].jlry_name }} {{item.cyinfo.hyry[0].jlry_getdate}}</text>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<u-loadmore :status="loadStatus" :load-text="loadText" margin-top="30" margin-bottom="30" />
		</scroll-view>

		<!-- 城市选择器
		<u-picker :show="showCityPicker" :columns="cityColumns" key-name="name" @confirm="confirmCity"
			@cancel="showCityPicker = false"></u-picker>

		<!-- 排序选择器 -->
		<u-picker :show="showSortPicker" :columns="sortColumns" @confirm="confirmSort"
			@cancel="showSortPicker = false"></u-picker>

		<!-- 证书选择器 -->
		<u-picker :show="showCertPicker" :columns="certColumns" @confirm="confirmCert"
			@cancel="showCertPicker = false"></u-picker>

		<!-- 经验选择器 -->
		<u-picker :show="showExpPicker" :columns="expColumns" @confirm="confirmExp"
			@cancel="showExpPicker = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 套餐文字
				valueStyle: {
					"color": "#158997"
				},
				value1: '',
				value2: '2',
				options1: [],
				options2: [],
				options3: [],
				options4: [],
				currentTab: 1, // 默认选中"我的招聘"
				// 筛选条件
				currentCity: '福州',
				currentSort: '综合排序',
				currentCert: '证书等级',
				currentExp: '工作年限',
				showCityPicker: false,
				showSortPicker: false,
				showCertPicker: false,
				showExpPicker: false,
				cityColumns: [
					[{
							name: '福州'
						},
						{
							name: '厦门'
						},
						{
							name: '泉州'
						},
						{
							name: '漳州'
						}
					]
				],
				sortColumns: [
					[
						'综合排序',
						'最新发布',
						'薪资最高',
						'评分最高'
					]
				],
				certColumns: [
					[
						'不限',
						'初级证书',
						'中级证书',
						'高级证书'
					]
				],
				expColumns: [
					[
						'不限',
						'1年以下',
						'1-3年',
						'3-5年',
						'5年以上'
					]
				],
				// 求职岗位
				activeJob: 0,

				// 加载更多
				loadStatus: 'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '正在加载...',
					nomore: '没有更多了'
				},
			  // 人才列表
				personList: [],
				// 套餐剩余次数
				tc_num: 10
			}
		},
		onShow() {
			// 查询简历列表
			this.$u.api.queryjlList({				
			}).then(res => {
				console.log("人才库：", res)
				this.personList = res.data.base_info
				
				// 获取过滤项内容
				this.getSelect()

			})
			// 查询套餐剩余次数
			this.$u.api.querytcnum({
				usercode: uni.getStorageSync('usercode')
			}).then(res => {
				console.log('剩余次数：', res)
				this.tc_num = res.data.tc_num
				
			})
		},
		methods: {
			getSelect() {
				this.options1 = []
				this.options2 = []
				this.options3 = []
				// this.options4 = []
				for(var i=0; i<this.personList.length; i++) {
					// 地区						
					this.options1.push({
						label: this.personList[i].cyinfo.qz.jlqz_workcity[i],
						value: i,
					})

					// // 岗位名称
					this.options2.push({
						label: this.personList[i].cyinfo.qz.jlqz_qwzw[i],
						value: i
					})
					// // 岗位类型
					this.options3.push({
						label: this.personList[i].cyinfo.qz.jlqz_xzyq,
						value: i
					})
					// // 薪资范围
					// this.options4.push({
					// 	label: this.personList[i].gwi_offer,
					// 	value: i
					// })
				}
				
				console.log('所在地区：', this.options1)
			},
			// 筛选选择变化
			change(index) {
				this.$u.toast(`点击了第${index}项`);
			},
			// 切换顶部导航
			changeTab(index) {
				this.currentTab = index
				this.loadCandidateList()
			},

			// 选择城市
			confirmCity(e) {
				this.currentCity = e.value[0].name
				this.showCityPicker = false
				this.loadCandidateList()
			},

			// 选择排序
			confirmSort(e) {
				this.currentSort = e.value[0]
				this.showSortPicker = false
				this.loadCandidateList()
			},

			// 购买套餐
			payPackage() {
				uni.navigateTo({
					url: `/pages/Institution/invite/payPackage?tcnum=${this.tc_num}`
				})

			},

			// 选择证书
			confirmCert(e) {
				this.currentCert = e.value[0]
				this.showCertPicker = false
				this.loadCandidateList()
			},

			// 选择经验
			confirmExp(e) {
				this.currentExp = e.value[0]
				this.showExpPicker = false
				this.loadCandidateList()
			},

			// 切换求职岗位
			changeJob(index) {
				this.activeJob = index
				this.loadCandidateList()
			},

			// 查看人才详情
			viewDetail(index) {
				uni.navigateTo({
					url: `/pages/Institution/invite/online-resume?usercode=${index}`
				})
			},

			// 加载人才列表
			loadCandidateList() {
				// 这里应该是API请求，示例使用模拟数据
				this.loadStatus = 'loading'
				setTimeout(() => {
					// 模拟数据加载
					this.loadStatus = 'loadmore'
				}, 1000)
			},

			// 加载更多
			loadMore() {
				// if (this.loadStatus !== 'loadmore') return

				// this.loadStatus = 'loading'
				// setTimeout(() => {
				// 	// 模拟加载更多数据
				// 	this.candidateList.push(...[{
				// 		id: 3,
				// 		avatar: '/static/avatar3.jpg',
				// 		name: '王女士',
				// 		age: '90年',
				// 		education: '本科',
				// 		exp: '4年',
				// 		salary: '面议',
				// 		rating: 4.0,
				// 		intention: '护理员、实习康养师...',
				// 		cases: '案例名称，案例名称...',
				// 		experience: '岗位名称，岗位名称...'
				// 	}])
				// 	this.loadStatus = 'nomore'
				// }, 1500)
			}
		},
		onLoad() {
			this.loadCandidateList()
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F1F7F7;

		/deep/ .u-tabs {
			background-color: #fff;
		}

		.filter-section {
			display: flex;
			padding: 8rpx 30rpx;
			// background-color: #fff;
			border-bottom: 1rpx solid #ffffff;
		}

		.Package-container {
			background-color: #97E8E0;
			margin: 10rpx 20rpx;
			border-radius: 12rpx;
			color: #303133;
		}

		.job-filter {
			padding: 20rpx 30rpx;
			background-color: #fff;
			white-space: nowrap;
			overflow-x: auto;

			.job-tag {
				margin-right: 20rpx;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.candidate-list {
			flex: 1;
			overflow: hidden;

			.candidate-item {
				margin: 20rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 12rpx;

				.candidate-header {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.info {
						flex: 1;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
						}

						.meta {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.candidate-content {
					font-size: 28rpx;
					color: #666;
					line-height: 1.6;

					.label {
						color: #333;
						font-weight: bold;
					}

					>view {
						margin-bottom: 15rpx;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
</style>